<!--
 * @Description: 该文件描述
 * @FilePath: \fortune_h5\src\modules\home\views\index.vue
 * @Author: Brian Brian@gmail.com
 * @Date: 2024-10-25 14:23:23
 * @LastEditors: Brian wxcn@gmail.com
 * @LastEditTime: 2024-11-07 09:35:54
-->
<script setup lang="ts">
import { useRouter } from "vue-router";
import wx from "../static/imgs/wx.png";
import { computed, ref } from "vue";
import { showFailToast, Popup, DatePicker, TimePicker } from "vant";
import { storageLocal } from "@wxcn/utils";
const router = useRouter();
function isAllChinese(text: string) {
  const regex = /^[\u4E00-\u9FA5]+$/; // 匹配全为中文的正则表达式
  return regex.test(text);
}
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const params = ref({
  xing: "",
  ming: "",
  sex: "乾",
  year: year,
  month: month < 10 ? "0" + month : month,
  day: day < 10 ? "0" + day : day,
  hourstr: "吉时",
});
const isDisabled = computed(() => {
  return params.value.xing === "" || params.value.ming === "";
});
const submit = () => {
  if (!isAllChinese(params.value.xing)) {
    showFailToast("请输入有效汉字");
    return;
  }
  if (!isAllChinese(params.value.ming)) {
    showFailToast("请输入有效汉字");
    return;
  }
  storageLocal.setItem("params", params.value);
  router.push("/home_result");
};
const currentDate = ref([year, month, day]);
const currentTime = ref<any>([]);

const show = ref(false);
const showTime = ref(false);
const onConfirm = (date: any) => {
  const [year, month, day] = date.selectedValues;
  params.value.year = year;
  params.value.month = month;
  params.value.day = day;
  currentDate.value = [year, month, day];
  show.value = false;
};
const minDate = new Date(1900, 0, 1);

const timeConfirm = (date: any) => {
  const [hour, minute] = date.selectedValues as [number, number];
  params.value.hourstr = `${hour}:${minute}`;
  currentTime.value = [hour, minute];
  showTime.value = false;
};
const clickHandle = () => {
  params.value.hourstr = "吉时";
  currentTime.value = [];
  showTime.value = false;
};
</script>

<template>
  <div class="wrap">
    <div class="fx-cc wx">
      <img :src="wx" alt="" />
    </div>
    <div class="form">
      <div>
        <div>姓氏 :</div>
        <input
          v-model="params.xing"
          maxlength="2"
          type="text"
          name="firstName"
          placeholder="请输入姓氏"
          autocomplete="off"
        />
      </div>
      <div>
        <div>名字 :</div>
        <input
          v-model="params.ming"
          maxlength="3"
          type="text"
          name="lastName"
          placeholder="请输入名字"
          autocomplete="off"
        />
      </div>
      <div class="fx-a-c">
        <div class="pr4">生辰 :</div>
        <div @click="show = true">
          {{ params.year }}年{{ params.month }}月{{ params.day }}日
        </div>
        <div class="px6">|</div>
        <div @click="showTime = true">{{ params.hourstr }}</div>
      </div>
      <div>
        <div class="pr6">性别 :</div>
        <div class="fx gap20">
          <label for="male" class="fx">
            <input
              id="male"
              v-model="params.sex"
              value="乾"
              type="radio"
              name="sex"
              hidden
            />
            <div class="radio" />
            男 (乾)
          </label>
          <label for="female" class="fx">
            <input
              id="female"
              v-model="params.sex"
              value="坤"
              type="radio"
              name="sex"
              hidden
            />
            <div class="radio" />
            女 (坤)
          </label>
        </div>
      </div>
      <button :disabled="isDisabled" class="btn" @click="submit">
        开始测试
      </button>
      <br />
      <br />
      <br />
    </div>
  </div>
  <Popup v-model:show="show" round position="bottom">
    <DatePicker
      v-model="currentDate"
      title="选择日期"
      :min-date="minDate"
      @cancel="show = false"
      @confirm="onConfirm"
    />
  </Popup>
  <Popup v-model:show="showTime" round position="bottom">
    <TimePicker
      v-model="currentTime"
      title="选择时间"
      :columns-type="['hour', 'minute']"
      @cancel="showTime = false"
      @confirm="timeConfirm"
    >
      <template #columns-top>
        <div class="fx-cc" @click="clickHandle">{{ "吉时" }}</div>
      </template>
    </TimePicker>
  </Popup>
</template>

<style lang="scss" scoped>
:deep(.van-picker__confirm) {
  color: #000;
}
.wrap {
  min-height: 100vh;
  background-image: url(../static/imgs/home_bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #f7edc1;
  .wx {
    padding-top: 80px;
    padding-bottom: 50px;
    img {
      width: 300px;
      height: auto;
    }
  }
  .form {
    padding: 0 50px;
    & > div:not(:last-child) {
      width: 100%;
      height: 42px;
      background-image: url(../static/imgs/inp_bg.png);
      background-size: 100% 100%;
      margin-bottom: 19px;
      display: flex;
      padding: 0 30px;
      align-items: center;
      font-size: 16px;
      color: #6f2121;
      > div {
        flex-shrink: 0;
      }
      > input {
        flex: 1;
        padding-left: 4px;
      }
      .radio {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #6f2121;
        margin-right: 6px;
        position: relative;
      }
      input[type="radio"]:checked + div:after {
        background-color: #6f2121;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }

    .btn {
      width: 100%;
      height: 52px;
      background-image: url(../static/imgs/btn_bg.png);
      background-size: 100% 100%;
      font-size: 18px;
      color: #f6efd4;
      font-weight: 700;
    }
  }
}
</style>
